<!--
 * @Description: 区域服务申请页面
 * @Author: Kerwin
 * @Date: 2024-10-12 16:24:51
 * @LastEditTime: 2024-10-12 17:01:21
 * @LastEditors:  Please set LastEditors
-->
<template>
	<view class="container">
		<hy-nav-bar title="区域服务申请" :background="{
			backgroundColor: 'rgba(0,0,0,0)'
		}" :border-bottom="false" :titleColor="'#000'" backIconColor="#000"></hy-nav-bar>
		<view></view>
		<view class="content">
			<view class="title">申请成为区域管理</view>
			<view class="tips">请选择服务区域</view>
			<!-- 城市 -->
			<view @click="openSelector" class="city-box">
				{{ address?.cityShortName || '定位中' }}
				<u-icon class="icon" :class="{ 'rotate-icon': selectorShow }" name="arrow-down-fill" size="24"
					color="#333"></u-icon>
			</view>
			<view class="desc">
				<view class="tit">区域服务人员的说明：</view>
				<view>
					1.成立区域群，区域群唯一
				</view>
				<view>2.成立该地区的小型服务中心</view>

				<view>3.需提供常用场地</view>

				<view>4.需有一定人脉</view>
			</view>
		</view>
		<view class="actions">
			<u-button class="submitBtn btn" @click="submit" type="primary" ripple>提交申请</u-button>
		</view>
		<u-select v-model="selectorShow" mode="mutil-column-auto" :list="cityList" :default-value="selectDefault"
			@confirm="selectorConfirm"></u-select>
	</view>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
import { getLocation } from '@/utils'
import { baseApi } from '@/api'



const selectorShow = ref(false)
function selectorConfirm(e: any) {
	console.log(e)
	selectDefault.splice(0, selectDefault.length, e[0], e[1])
	console.log(selectDefault)
	const data = {
		provinceId: e[0].value,
		cityId: e[1].value,
		provinceName: e[0].label,
		cityName: e[1].label,
	}
	address.value = addressFormat(data)
}
interface Address {
	cityShortName?: string
	cityName?: string
	districtName?: string
	provinceName?: string
	provinceId?: number
	cityId?: number
	districtId?: number
}
const address = ref<Address>()
async function getCurrentCity() {
	const location = await getLocation()
	const { data } = await baseApi.reverseGeocoding(location)
	address.value = addressFormat(data)
	uni.setStorageSync('currentAddress', address.value)
	console.log(address.value)
}
function addressFormat(address: Address): Address {
	if (typeof address === 'undefined' || address === null || JSON.stringify(address) === '{}') {
		return {}
	}
	if (typeof address.cityName !== 'undefined' && address.cityName !== null) {
		address.cityShortName = address.cityName.split('市')[0]
	}
	return address
}
getCurrentCity()


const cityList = ref<object[]>([])
interface Area {
	id: string
	name: string
	parentId: string
	deep: number
}
function partTree(tableData: Area[], keys = ["label", "value"]): object[] {
	let p = [];
	let c = [];
	let a = [];
	for (var i = 0; i < tableData.length; i++) {
		tableData[i][keys[0]] = tableData[i].name;
		tableData[i][keys[1]] = tableData[i].id;
		const deep = tableData[i].deep
		deep == 1 && p.push(tableData[i]);
		deep == 2 && c.push(tableData[i]);
		deep == 3 && a.push(tableData[i]);
	}
	// for (var i = 0; i < a.length; i++) {
	// 	for (var j = 0; j < c.length; j++) {
	// 		!c[j].children && (c[j].children = []);
	// 		if (a[i].parentId == c[j].id) {
	// 			c[j].children.push(a[i]);
	// 		}
	// 	}
	// }
	for (var i = 0; i < c.length; i++) {
		for (var j = 0; j < p.length; j++) {
			!p[j].children && (p[j].children = []);
			if (c[i].parentId == p[j].id) {
				p[j].children.push(c[i]);
			}
		}
	}
	return p;
}
function getRegionDate() {
	uni.request({
		url: 'https://image.blacksilverscore.com/App/bbd3f87e-7e56-4b1d-8d53-97c3313391f4.json',
		data: {},
		header: {
			Accept: 'application/json',
			'Content-Type': 'application/json',
			'X-Requested-With': 'XMLHttpRequest'
		},
		method: 'GET',
		sslVerify: true,
		success: ({ data, statusCode, header }) => {
			cityList.value = partTree(data as Area[])
			console.log(cityList.value)
		},
		fail: (error) => { }
	})
}
getRegionDate()
const selectDefault = reactive<number[]>([])
function openSelector() {
	selectorShow.value = !selectorShow.value
	if (selectorShow.value) {
		if (typeof address.value !== 'undefined' && address.value !== null && JSON.stringify(address.value) !== '{}') {
			const { provinceId, cityId, districtId } = address.value
			const pIdx = cityList.value.findIndex((item) => item.id === provinceId)
			const cIdx = cityList.value[pIdx]?.children?.findIndex((item: { id: number | undefined }) => item.id === cityId)
			const dIdx = cityList.value[pIdx]?.children[cIdx]?.children?.findIndex((item: { id: number | undefined }) => item.id === districtId)
			selectDefault.splice(0, selectDefault.length, pIdx, cIdx)
		} else {
			selectDefault.splice(0, selectDefault.length, 0, 0)
		}
	}
}

const submit = () => { 
	console.log(address.value)
}


</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #fff;
	padding: 30rpx;
	color: #333;

	.title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.tips {
		margin-bottom: 10rpx;
	}

	.desc {
		line-height: 46rpx;
		margin-top: 60rpx;
		font-size: 24rpx;

		.tit {
			margin-bottom: 10rpx;
		}
	}

	.actions {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0 20rpx calc(env(safe-area-inset-bottom) + 40rpx) 20rpx;

		.submitBtn {
			background: #FF6C18;
			margin: 0;
			border-radius: 80rpx;

			&.btn {
				width: 100%;
				margin: 0 auto;
				margin-top: 20rpx;
				display: block;
				border: none;
				outline: none;

				&:after {
					display: none;
				}
			}
		}
	}
}
</style>
